<template>
  <div v-if="state.lottery" class="data">
    <div>{{ state.lottery.name }}</div>
    <n-data-table :columns="state.columns" :data="state.data" />
  </div>
  <div v-else class="empty">
    <n-empty description="空空如也~"></n-empty>
  </div>
</template>

<script setup>
import { reactive, onMounted, h } from 'vue'
import { useRoute } from 'vue-router'
import { NDataTable, NTag, NEmpty } from 'naive-ui'
import axios from 'axios'
import moment from 'moment'
import { ApiPrefix } from '../../config.js'

const route = useRoute()

const state = reactive({
  columns: [
    {
      title: 'ID',
      key: 'id'
    },
    {
      title: '昵称',
      key: 'name'
    },
    {
      title: '状态',
      key: 'state',
      render(row) {
        return h(
          NTag,
          {
            type: row.state === 2 ? 'success' : 'error'
          },
          {
            default: () => row.state === 2 ? '已领取' : '未领取'
          }
        )
      }
    },
    {
      title: '奖品',
      key: 'prize'
    },
    {
      title: '获取时间',
      key: 'fetch_at'
    },
    // {
    //   title: '密钥',
    //   key: 'key',
    //   width: 300
    // },
    // {
    //   title: '操作',
    //   key: 'actions',
    //   render(row) {
    //     return h(
    //       NButton,
    //       {
    //         size: 'small',
    //         onClick: () => copyTo(row.url)
    //       },
    //       { default: () => '复制链接' }
    //     )
    //   }
    // }
  ],
  data: [],
  lottery: null
})

onMounted(() => {
  const lotteryId = route.params.id
  if (lotteryId) axios.post(`${ApiPrefix}/dashboard/result`, {
    id: parseInt(lotteryId)
  }).then((r) => {
    if (r.data) {
      state.lottery = r.data.lottery
      state.data = r.data.results.map((item) => {
        return {
          id: item.prize.id,
          name: item.gamer ? item.gamer.name : '',
          prize: item.prize.name,
          state: item.prize.state,
          fetch_at: item.prize.fetch_at ? moment(item.prize.fetch_at).format('YYYY-MM-DD HH:mm:ss') : '',
        }
      })
    }
  })
})
</script>

<style scoped>
.data {
  width: 100%;
}
.empty {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 282px;
}
</style>